function sex_count() {
    showTableAndEcharts();
    stopColor();
    isFlag = true;
    //发送请求查询不同性别的统计结果
    $.ajax({
        method:"POST",
        url:"findSexCount",
        success:function (data) {
            $("#tip").html("<h3>不同性别的统计表格</h3>");
            $("#echart-tip").html("<h3>不同性别的统计图表</h3>");

            //添加图表对应的容器
            $("#dataEcharts div:gt(0)").remove();
            $("#dataEcharts").append('<div id="sexTotal" class="col-sm-4" style="height: 450px; width: 430px"></div>');
            $("#dataEcharts").append('<div id="sexUser" class="col-sm-4" style="height: 450px; width: 430px"></div>');
            $("#dataEcharts").append('<div id="sexType" class="col-sm-4" style="height: 450px; width: 430px"></div>');

            //把数据显示在表格和图表中
            //重置表头
            $("#head-tr").empty();
            $("#head-tr").append("<th>ID</th><th>性别</th><th>浏览量</th><th>加入购物车量</th><th>购买量</th><th>总量</th><th>用户量</th>");
            //重置表的数据
            $("#tbody").empty();

            var jsonARR = JSON.parse(data);
            //重新加载表格的数据
            initTable1(jsonARR);
            //加载图表
            initEchart2(jsonARR);

        }
    })
}


function initTable1(jsonARR) {

    $.each(jsonARR, function (index, sexCount) {
        if (index % 2 == 0) {
            $("tbody").append("<tr class='active'><td>"+sexCount.id+"</td><td>"+sexCount.sex+"</td><td>"+sexCount.viewCount+
                "</td><td>"+sexCount.cartCount+"</td><td>"+sexCount.parchaseCount+"</td><td>"+sexCount.totalCount+
                "</td><td>"+sexCount.userCount+"</td></tr>")
        } else {
            $("tbody").append("<tr class='info'><td>"+sexCount.id+"</td><td>"+sexCount.sex+"</td><td>"+sexCount.viewCount+
                "</td><td>"+sexCount.cartCount+"</td><td>"+sexCount.parchaseCount+"</td><td>"+sexCount.totalCount+
                "</td><td>"+sexCount.userCount+"</td></tr>")
        }
    });
}


function initEchart2(jsonARR) {
    var manTotalCount = 0;
    var womanTotalCount = 0;
    var manUserCount = 0;
    var womanUserCount = 0;
    var manViewCount = 0, manCartCount = 0, manParchaseCount = 0;
    var womanViewCount = 0, womanCartCount = 0, womanParchaseCount = 0;

    $.each(jsonARR, function (index, sexCount) {
        if (sexCount.sex == "男") {
            manTotalCount = sexCount.totalCount;
            manUserCount = sexCount.userCount;
            manViewCount = sexCount.viewCount;
            manCartCount = sexCount.cartCount;
            manParchaseCount = sexCount.parchaseCount;
        } else {
            womanTotalCount = sexCount.totalCount;
            womanUserCount = sexCount.userCount;
            womanViewCount = sexCount.viewCount;
            womanCartCount = sexCount.cartCount;
            womanParchaseCount = sexCount.parchaseCount;
        }
    });


    //用户的总操作量
    var sexTotalData = [{
        value: manTotalCount,
        name: '男'
    }, {
        value: womanTotalCount,
        name: '女'
    }];
    var sexTotal = echarts.init(document.getElementById("sexTotal"));
    var option = {
        title: {
            text: '不同性别的总操作量',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'right'
        },
        series: [{
            type: 'pie',
            data: sexTotalData
        }]
    };
    sexTotal.setOption(option);

    //不同性别的用户
    var sexUserData = [{
        value: manUserCount,
        name: '男'
    }, {
        value: womanUserCount,
        name: '女'
    }];
    var sexUser = echarts.init(document.getElementById("sexUser"));
    var option1 = {
        title: {
            text: '不同性别的用户数量',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'right'
        },
        series: [{
            type: 'pie',
            data: sexUserData
        }]
    };
    sexUser.setOption(option1);

    //用户的三个操作量柱状图
    var sexType = echarts.init(document.getElementById("sexType"));

    var option2 = {
        title: {
            text: '性别统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            x: 55,
            // y: 10,
            // x2: 5,
            // y2: 20
        },
        legend: {
            data: ['view', 'cart', 'parchase'],
            orient: 'vertical',
            left: "right"
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar', 'stack'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: { show: false },
                data: ['男', '女']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'view',
                type: 'bar',
                barGap: 0,
                // label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [manViewCount, womanViewCount]
            },
            {
                name: 'cart',
                type: 'bar',
                // label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [manCartCount, womanCartCount]
            },
            {
                name: 'parchase',
                type: 'bar',
                // label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [manParchaseCount, womanParchaseCount]
            },
        ]
    };
    sexType.setOption(option2);


    $("tbody tr").on("mouseenter", this, function() {
        color = $(this).attr("class");
        $(this).removeClass(color);
        $(this).addClass("success");
    });
    $("tbody tr").on("mouseleave", this, function() {
        $(this).removeClass("success");
        $(this).addClass(color);
    });

}
